import React from 'react';
import styles from './index.css';

class BasicLayout extends React.Component<{}, null> {
  constructor(props: any) {
    super(props);
  }

  componentDidMount() {
    this.resize();
    window.addEventListener('resize', this.resize);
  }

  componentDidUpdate() {
    window.removeEventListener('resize', this.resize);
  }

  resize = () => {
    const { clientWidth } = document.body;
    document.body.style.transformOrigin = 'left top';
    document.body.style.transform = `scale(${clientWidth / 1920})`;
  }

  render() {
    return (
      <>
        <header className={styles.normal}>
          <div className={styles.left}></div>
          <div className={styles.center}></div>
          <div className={styles.right}></div>
        </header>
        <div className={styles.container}>{this.props.children}</div>
      </>
    );
  }
}

export default BasicLayout;
